<template>
  <!-- <el-button @click="switchMap('咸阳T5F1')">T5F1</el-button>
  <el-button @click="switchMap('咸阳T5F2')">T5F2</el-button> -->
  <map-control @mapClick="mapClick" @mapLoad="mapLoadEvent" @send-message="receiveMessage"></map-control>
</template>

<script lang="ts" setup>
import { store } from '@/components/map/mapStore'
import mapControl from '@/components/map/index.vue'
import { image } from '@/assets/index'
import { ref, defineExpose } from 'vue'
const props = defineProps({
  place: {
    type: Object
  },
  type:{
    type:  Number
  }
})


const coordinate = ref<{ latitude: any, longitude: any }>({ latitude: '', longitude: '' })
// 传值给父组件
defineExpose({ coordinate })
const receiveMessage=(data:any)=>{
console.log(data);

}

// 地图加载完成事件
const mapLoadEvent = () => {
  // console.log('1233213')
  // 回显点
  //查看回显
  if (props.place && props.type==1) {
    // 创建点
    const point = store.BNMap.createPoint({ x: props.place?.longitude, y: props.place?.latitude, spatialReference: store.BNMap.spatialReference })
    console.log('store.BNMap',store.BNMap)
    // 创建图片
    const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 20, 25)
    // // 创建要素
    const picgraphic = store.BNMap.graphic(point, symbolStyle)
    // // 添加到地图
    const clickLayer = store.BNMap.creatGraphicsLayer({ id: 'clickLayer' })
    clickLayer.add(picgraphic)
    store.BNMap.addGraphicsLayer(clickLayer)
    // // 设置地图中心点
    store.BNMap.setCenter(point);
  }
}
// 点击事件
const evts = ref()
const mapClick = (evt: any) => {
  if (props.place && props.type==1) {
    return
  }

  // 地点
  coordinate.value.longitude = evt.mapPoint.x
  coordinate.value.latitude = evt.mapPoint.y

  // 点位坐标 longitude：evt.mapPoint.x  latitude：evt.mapPoint.y
  // 区域字段在地图数据中暂时没有
  // 移除临时图层
  store.BNMap.removeGraphicsLayer('clickLayer')
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: 'clickLayer' })
  clickLayer.removeAll()
  // 创建点
  const point = store.BNMap.createPoint({ x: evt.mapPoint.x, y: evt.mapPoint.y, spatialReference: evt.mapPoint.spatialReference  })
  // store.BNMap.setCenter(point);
  console.log(evt.mapPoint.spatialReference,'参数');

  // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 20, 25)
  // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle)
  // 添加到地图
  clickLayer.add(picgraphic)
  store.BNMap.addGraphicsLayer(clickLayer)
}
let lettime: any;


const switchMap = (name: String) => {
  console.log(store.BNMap.switchDCJ)
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
    console.log(evt)
    console.log("回调")
  });
}

</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
}

// .dialog-footer {
//   display: flex;
//   width: 100% !important;
//   justify-content: center;
// }
</style>
